<template>
  <div class="smallRoutine">
    <div class="smallRoutineItem">
      <div class="logo first">
        <i class="iconfont icon-position"></i>
      </div>
      <div class="text">听歌识曲</div>
    </div>
    <div class="smallRoutineItem">
      <div class="logo second">
        <i class="iconfont icon-haibao"></i>
      </div>
      <div class="text">歌词海报</div>
    </div>
    <div class="smallRoutineItem">
      <div class="logo third">
        <i class="iconfont icon-diantai"></i>
      </div>
      <div class="text">睡眠电台</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SmallRoutine",
};
</script>

<style lang="scss" scoped>
.smallRoutine {
  display: flex;
  justify-content: space-around;
  align-items: center;
  .smallRoutineItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    .logo {
      width: 5rem;
      height: 5rem;
      text-align: center;
      line-height: 5rem;
      border-radius: 50%;
      i {
        font-size: 3rem;
      }
      .icon-position {
        color: #00fc42;
      }
      .icon-haibao {
        color: #fff;
      }
      .icon-diantai {
        color: #9dafce;
      }
    }
    .first {
      background: -webkit-linear-gradient(-45deg, #00193e, #219d64);
    }
    .second {
      background: -webkit-linear-gradient(-45deg, #04c4da, #d2e60e);
    }
    .third {
      background: -webkit-linear-gradient(-45deg, #070b2c, #3d72c2);
    }
    .text {
      margin-top: 0.5rem;
      font-size: 1rem;
      color: #1a1a1a;
    }
  }
}
</style>